<template>
    <div class="RxFilters">
        <div class="RxFilters-Overlay" v-if="show" @click="show = false"></div>
        <div class="RxFilters-head">
            <div class="RxFilters-input">
                <my-icon type="icon-Vue3_search"></my-icon>
                <input :placeholder="placeholder" @confirm="pressEnter" v-model="searchVal"/>
            </div>
            <div class="RxFilters-screen" @click="filtrate">
                <i class="iconfont icon-Vue3_screen-filled"></i>
                <span style="font-size: 0.8rem">{{ $ti18('mobileList.filter', '筛选') }}</span>
            </div>
        </div>
        <div class="RxFilters-center" v-if="show">
            <div class="RxFilters-navigation RxFilters-navigation-head">
                <div class="RxFilters-navigation-center">
                    <span @click="init">{{ namelit }}</span>
                    <div v-for='(obj,index) in headList' :key="index" @click='navigation(obj,index)'>
                        <i class="iconfont icon-jiantou_liebiaoxiangyou"></i>
                        <span>{{ obj.name }}</span>
                    </div>
                </div>
            </div>
            <div class='RxFilters-center-list'>
                <div v-for="(obj,index) in listed" :key="index">
                    <span v-if="obj.chlist.length==0" @click='choice(obj)'>{{ obj.name }}</span>
                    <span class="RxFilters-screen-list" v-else @click='screen(obj,true,index)'><div
                        style="flex: 1">{{ obj.name }}</div><my-icon type="icon-jiantou_liebiaoxiangyou"></my-icon></span>
                </div>
            </div>
            <div class="RxFilters-bottom">
                <div @click="reset">{{ $ti18('rxList.resetBtn', '重置') }}</div>
                <div @click="determine">{{ $ti18('rxForm.okBtn', '确定') }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import instAndTaskShareApi from "@/api/instAndTaskShareApi";
import instAndTaskShare from '@/common/instAndTaskShare'

export default {
    name: "RxFilters",
    data() {
        return {
            searchVal: '',
            list: [],//全部数据
            listed: [],//拼接好数据
            headList: [],//头部
            headParentId: '',
            parentId: '',
            mobileAppId: uni.getStorageSync("mobileAppId") || "",
            allTreeList: [],//全部数据
            show: false,
            user: {}
        }
    },
    mixins: [instAndTaskShare],
    props: {
        /**
         * 分类key
         */
        keyname: {
            type: String,
            default: ''
        },
        /**
         * 分类名称
         */
        namelit: {
            type: String,
            default: ''
        },
        /**
         * 默认需要授权。
         */
        isGrant: {
            type: Boolean,
            default: true
        },
        /**
         * 初始化的时候进行加载，默认为true
         */
        isMyBpm: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        screenName: {
            type: String,
            default: ''
        },
        readType: {
            type: String,
            default: ''
        },
        firstSelected: {
            type: Boolean,
            default: false
        }
    },
    computed: {},
    mounted() {
        this.user = uni.getStorageSync("user")
    },
    methods: {
        navigation(item,index){
            this.headList = this.headList.slice(0,index+1);
            if (this.mobileAppId) {
                this.again(item)
            } else {
                this.againByAppId(item.appId, item)
            }
        },
        init() {
            if(!this.isShowManageTree){
                return;
            }
            if (this.mobileAppId || !this.treeRootList || this.treeRootList.length == 0) {
                this.addClass(this.keyname);
            } else {
                this.addClassByTreeRootList();
            }
        },
        addClass(key) {
            var curUser = this.user;
            let mobileAppId = uni.getStorageSync("mobileAppId")||"";
            let isAdmin=false;
            if(curUser.admin) {
                isAdmin = true;
            }else if(mobileAppId){
                isAdmin=uni.getStorageSync("isMobileAppAdmin")||false;
            }
            instAndTaskShareApi.getByCatKey(key, isAdmin).then(res => {
                this.list = res;
                this.reduction()
            })
        },
        addClassByTreeRootList() {
            let self_ = this;
            instAndTaskShareApi.getMyOwnByCatKey(self_.keyname, self_.isManageToTree, self_.isGrant, JSON.stringify(self_.treeRootList), this.isMyBpm).then(res => {
                self_.allTreeList = res;
                self_.handleRootTreeData();
            })
        },
        handleRootTreeData() {
            this.headList = [];
            this.listed = [];
            for (let i = 0; i < this.treeRootList.length; i++) {
                let treeObj = this.treeRootList[i];
                let treeStr = JSON.stringify(treeObj);
                let treeCat = JSON.parse(treeStr);
                treeCat.treeCatType = "rootApp";
                treeCat.treeId = treeCat.appId;
                treeCat.parentId = "0";
                treeCat.key = treeCat.appId;
                treeCat.value = treeCat.appId;
                treeCat.name = this.$i18(treeCat.name, "应用名称");
                treeCat.chlist = [];
                this.handleChlistTreeData(treeCat);
                this.listed.push(treeCat);
            }
        },
        handleChlistTreeData(treeCat) {
            let chiltTrees = this.allTreeList[treeCat.appId];
            let children = treeCat.chlist;
            for (var listyp of chiltTrees) {
                if (listyp.parentId == '0') {
                    children.push(listyp)
                }
            }
            for (let obj of children) {
                let chlist = [];
                for (var listed of chiltTrees) {
                    if (obj.treeId == listed.parentId) {
                        chlist.push(listed)
                    }
                }
                this.$set(obj, 'chlist', chlist)
            }
        },
        screen(screenlist, name, index) {
            this.headParentId = screenlist.treeId;
            let obj = {};
            let arl = ['name','parentId','treeId','appId']
            arl.forEach(res=>{
                this.$set(obj, res, screenlist[res]);
            })
            if ("rootApp" == screenlist.treeCatType) {
                this.$set(obj, 'treeCatType', screenlist.treeCatType);
            }
            this.headList.push(obj);
            if (this.mobileAppId) {
                this.again(screenlist)
            } else {
                this.againByAppId(screenlist.appId, screenlist)
            }
        },
        againByAppId(appId, screenlist) {
            if (!appId || "0" == appId) {
                appId = "defaultTree";
            }
            this.listed = [];
            let chiltTrees = this.allTreeList[appId];
            for (var listyp of chiltTrees) {
                if ((listyp.parentId == screenlist.treeId) ||
                    ("rootApp" == screenlist.treeCatType && listyp.parentId == "0")) {
                    this.listed.push(listyp)
                }
            }
            for (let obj of this.listed) {
                this.chlist = [];
                for (let listed of chiltTrees) {
                    if (obj.treeId == listed.parentId) {
                        this.chlist.push(listed)
                    }
                }
                this.$set(obj, 'chlist', this.chlist)
            }
        },
        again(screenlist) {
            this.listed = [];
            for (let listyp of this.list) {
                if (listyp.parentId == screenlist.treeId) {
                    this.listed.push(listyp)
                }
            }
            for (let obj of this.listed) {
                this.chlist = [];
                for (var listed of this.list) {
                    if (obj.treeId == listed.parentId) {
                        this.chlist.push(listed)
                    }
                }
                this.$set(obj, 'chlist', this.chlist)
            }
        },
        reduction() {
            this.headList = [];
            this.listed = [];
            for (var listyp of this.list) {
                if (listyp.parentId == '0') {
                    this.listed.push(listyp)
                }
            }
            for (let obj of this.listed) {
                this.chlist = [];
                for (var listed of this.list) {
                    if (obj.treeId == listed.parentId) {
                        this.chlist.push(listed)
                    }
                }
                this.$set(obj, 'chlist', this.chlist)
            }
            if(this.firstSelected && !this.show){
                this.determine()
            }
        },
        choice(screenlist) {
            this.headParentId = screenlist.treeId;
            let hering = {};
            this.$set(hering, 'name', screenlist.name);
            this.$set(hering, 'parentId', screenlist.parentId);
            this.$set(hering, 'treeId', screenlist.treeId);
            this.$set(hering, 'appId', screenlist.appId);
            if ("rootApp" == screenlist.treeCatType) {
                this.$set(hering, 'treeCatType', screenlist.treeCatType);
            }
            this.headList.push(hering);
            this.listed = [];
        },
        pressEnter() {
            this.determine()
        },
        filtrate() {
            this.show = true
        },
        determine() {
            this.parentId = this.headParentId;
            if (!this.headParentId && !this.mobileAppId) {
                this.initAllRootAppParams();
            }
            this.loadListShare(true, false);
            this.show = false;
        },
        reset() {
            this.searchVal = '';
            this.$emit('loadListByParams', '')
            this.show = false;
        }
    }
}
</script>

<style scoped>
.RxFilters-head {
    background-color: white;
    padding: 0.5rem;
    display: flex;
    overflow: hidden;
    align-items: center;
}

.RxFilters-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1rem;
}

.RxFilters-screen i {
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.9rem;
}

.RxFilters-input {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 5px;
    height: 2rem;
    line-height: 2rem;
    padding: 0 0.5rem;
}

.RxFilters-input i {
    color: #555555;
    font-size: 1rem;
    margin-right: 0.5rem;
}
.RxFilters-input input{
    flex: 1;
}

.RxFilters-Overlay {
    width: 100%;
    height: calc(100vh - 2.7rem);
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top:4rem;
    left: 0rem;
    z-index: 99999;
}

.RxFilters-center {
    width: 100%;
    background-color: white;
    overflow: hidden;
    position: absolute;
    top:4rem;
    left: 0rem;
    z-index: 99999999;
}

.RxFilters-navigation {
    height: 2rem;
    line-height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.RxFilters-navigation-head {
    border-bottom: 1px solid #e8e8e8;
    background-color: #f7f9fa;
}

.RxFilters-navigation > div:first-child {
    color: #b0b9ca;
    font-size: 0.9rem;
}

.RxFilters-navigation-center,
.RxFilters-navigation-center > div {
    display: flex;
    align-items: center;
}

.RxFilters-navigation-center span {
    display: inline-block;
    color: #b0b9ca;
    white-space: nowrap;
}

.RxFilters-navigation-center i {
    color: #c1c3c4;
}

.RxFilters-navigation-center span:first-child {
    padding-left: 0;
}

.RxFilters-navigation-center div:last-child span {
    color: #555;
}

.RxFilters-center-list > div {
    border-bottom: 1px dashed #f1f1f1;
    margin-right: 0.5rem;
    height: 3rem;
    line-height: 3rem;
    display: flex;
    align-items: center;
}

.RxFilters-center-list div:last-child {
    border: none !important
}

.RxFilters-center-list div span {
    width: 100%;
    padding-left: .5rem;
    display: flex;
    align-items: center;

}

.RxFilters-center-list i {
    color: #c1c3c4;
}

.RxFilters-center-list {
    max-height: 10rem;
    overflow: auto;
}

.RxFilters-screen-list {
    border-left: 2px solid #1890ff;
}

.RxFilters-bottom {
    display: flex;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
}

.RxFilters-bottom > div:nth-child(1) {
    flex: 1;
    color: #777777;
    border-top: 1px solid #e8e8e8;
}

.RxFilters-bottom > div:nth-child(2) {
    color: #FFFFFF;
    flex: 1;
    background-color: #2871ff;
}
</style>
